<template>
	<view class="container pt_8 plr_16 pbsafe_64">
		<view class="p_12 br_8 bc_fff">
			<GoodsCard :data="dataInfo" type="evaluate-card" goodsType="7" :toDetail="false" />
		</view>
		<view class="p_12 br_8 bc_fff mt_8">
			<view>
				商品质量
			</view>
			<view class="mt_10 fx aic">
				<u-rate :count="count" v-model="scoreLevel" size="48rpx" inactiveColor="#ccc" activeColor="#D70000"
					:readonly="!!eId"></u-rate>
				<text class="ml_12">{{scoreLevel}}分</text>
			</view>
		</view>
		<view class="p_12 br_8 bc_fff mt_8">
			<view v-if="eId">
				{{evaluateContent||''}}
			</view>
			<!-- <u--textarea v-model="evaluateContent" placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" autoHeight maxlength="200"
				border="none" v-else></u--textarea> -->
			<textarea class="w100 minh_54 box lh_18" placeholder-style="font-size: 24rpx;" placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧"
				v-model="evaluateContent" :auto-height="true" maxlength="200" v-else></textarea>
			<view class="mt_70" v-if="!eId">
				<u-upload :multiple="true" maxCount="6" width="196" height="196" :fileList="uploadList"
					@afterRead="afterRead" @delete="deletePic" name="list1">
					<view class="fx fx_col aic jcc width_98 height_98 bo_1 boc_999 br_4 box"
						style="border-style: dashed;">
						<u-icon name="camera-fill" size="48rpx" color="#999999">
						</u-icon>
						<view class="fc_999 fz_12 mt_8">
							上传图片
						</view>
					</view>
				</u-upload>
			</view>
			<view class="mt_70" v-else-if="imgList.length">
				<view class="dg jcb gridr_12" style="grid-template-columns: repeat(3, 196rpx);">
					<CustomImage width="196rpx" height="196rpx" radius="16rpx" :src="item" v-for="item,index in imgList"
						:key="index" @click.native="$utils.handlePreview(index,imgList)">
					</CustomImage>
				</view>
			</view>
			<view class="mt_16 pt_6 pb_6 pl_12 pr_12 bc_ reply br_4" v-if="!!eId&&replyContent">
				<text class="fc_r">店小二：</text>
				<text>{{replyContent||''}}</text>
			</view>
		</view>
		<view class="pf b_0 l_0 r_0 plr_16 pbsafe_8 pt_8 bc_fff" v-if="!eId">
			<button class="custom_btn primary lh_40 w100 fz_14 br_40" :disabled="disableBtn"
				@click="handleSubmit">立即评价</button>
		</view>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import CustomImage from '@/components/Image'
	import upload from '@/mixins/upload.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [upload],
		components: {
			GoodsCard,
			CustomImage
		},
		data() {
			return {
				count: 5,
				scoreLevel: 0, // 星级
				evaluateContent: '', // 内容
				uploadList: [], // 上传图片
				replyContent: '', // 回复内容
				imgList: [],
				eId: null,
				oId: null,
				gId: null,
				coId: null,
				dataInfo: {},
			}
		},
		onLoad(options) {
			if (options.e_id) {
				this.eId = options.e_id
				uni.setNavigationBarTitle({
					title: '查看评价'
				})
				this.$utils.loading()
				api.get('/goods/api/productEvaluate/' + this.eId, {}, {
					noHideLoading: true
				}).then(res => {
					if (res.data) {
						this.imgList = res.data.evaluateImageUrl ? res.data.evaluateImageUrl.split(',') : []
						this.scoreLevel = res.data.scoreLevel
						this.evaluateContent = res.data.evaluateContent
						this.replyContent = res.data.replyContent
						this.dataInfo = res.data
						if (options.o_id && options.g_id && options.co_id) {
							this.oId = options.o_id
							this.gId = options.g_id
							this.coId = options.co_id
							api.get('/order/api/order/detail/' + this.oId).then(res => {
								const goodsList = (res.data.orderBrandInfoList && res.data
									.orderBrandInfoList
									.length) ? res.data.orderBrandInfoList.reduce((arr, item) => {
									return [...arr, ...item.productInfoList]
								}, []) : []
								this.dataInfo = goodsList.find(item => item.productId == this.gId) ?? {}
							})
						} else {
							uni.hideLoading()
						}
					}
				}).catch((e) => {
					console.log(e)
					uni.hideLoading()
				})
			} else {
				uni.setNavigationBarTitle({
					title: '商品评价'
				})
				if (options.o_id && options.g_id && options.co_id) {
					this.oId = options.o_id
					this.gId = options.g_id
					this.coId = options.co_id
					this.$utils.loading()
					api.get('/order/api/order/detail/' + this.oId).then(res => {
						const goodsList = (res.data.orderBrandInfoList && res.data.orderBrandInfoList
							.length) ? res.data.orderBrandInfoList.reduce((arr, item) => {
							return [...arr, ...item.productInfoList]
						}, []) : []
						this.dataInfo = goodsList.find(item => item.productId == this.gId) ?? {}
					})
				} else {
					this.$utils.showToast('未查到此订单', 1500, 1)
				}
			}
		},
		methods: {
			handleSubmit() {
				if (!this.scoreLevel) {
					return this.$utils.showToast('请评价商品质量')
				}
				// if (this.evaluateContent) {
				// 	return this.$utils.showToast('请填写评价')
				// }
				this.$utils.loading()
				api.post('/order/api/order/productEvaluate', {
					orderInfoId: this.coId,
					evaluateContent: this.evaluateContent,
					scoreLevel: this.scoreLevel,
					evaluateImageUrl: this.uploadList.map(item => item.url).join(',')
				}).then(() => {
					this.$utils.showToast('提交成功', 1500, 1, '', 'success')
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {
		/deep/.u-rate__content {
			.u-rate__content__item+.u-rate__content__item {
				margin-left: 24rpx;
			}
		}

		/deep/.u-textarea {
			padding: 0 !important;
		}

		/deep/textarea {
			min-height: 72rpx;
		}

		/deep/.u-upload__wrap {
			display: grid !important;
			grid-template-columns: repeat(3, 196rpx);
			justify-content: space-between;
			grid-row-gap: 24rpx;
		}
	}
</style>